import React, { Component } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import { Modal, PickerView } from "@ant-design/react-native";
import { ColorPrimary } from "../../theme";

const styles = StyleSheet.create({
  header: {
    width: "100%",
    flexDirection: "row",
    paddingTop: 30,
  },
  btn: {
    width: "50%",
    alignItems: "center",
  },
  cancel: {
    color: "rgba(0,0,0,0.35)",
    fontSize: 18,
    fontWeight: "500",
  },
  confirm: {
    color: ColorPrimary,
    fontSize: 18,
    fontWeight: "500",
  },
});

// const seasons = [
//   [
//     {
//       label: "春",
//       value: "春",
//     },
//     {
//       label: "夏",
//       value: "夏",
//     },
//   ],
// ];

class CustomSelect extends Component {
  constructor(props) {
    super(props);
    const { data = [], value } = props;
    const initState = {
      value: [data[0][0].value],
    };
    if (value) {
      initState.value = value;
    }
    this.state = {
      ...initState,
    };
  }

  onConfirm = () => {
    const { onChange = () => {}, onClose = () => {} } = this.props;
    const { value } = this.state;
    onChange(value);
    onClose();
  };

  render() {
    const { value } = this.state;
    const { visible, data = [], onClose = () => {} } = this.props;
    return (
      <Modal
        maskClosable
        popup
        animationType="slide-up"
        onClose={onClose}
        visible={visible}
      >
        <View style={styles.header}>
          <TouchableOpacity style={styles.btn} onPress={onClose}>
            <Text style={styles.cancel}>取消</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.btn} onPress={this.onConfirm}>
            <Text style={styles.confirm}>确认</Text>
          </TouchableOpacity>
        </View>
        <PickerView
          onChange={v => {
            this.setState({ value: v });
          }}
          value={value}
          data={data}
          cascade={false}
        />
      </Modal>
    );
  }
}

export default CustomSelect;
